<template>
    <div class="show_test_re">
        <el-row>
            <el-col :span="8" style="width:100vh">
                <el-card>
                    <el-image
                    :src = "tabledata.real_result.confusion_matrix.path"
                    class="image"
                    fit="contain"
                    >
                    </el-image>
                </el-card>
            </el-col>
            <el-col :span="8" style="width:100vh">
                <el-card>
                    <el-image
                    :src = "tabledata.adv_result.confusion_matrix.path"
                    class="image"
                    fit="contain"
                    >
                    </el-image>
                </el-card>
            </el-col>
        </el-row>
        <div id="chart_real" style="height:500px;width:100vh">
        </div>
    </div>
</template>
<script>
    import * as echarts from 'echarts'
    export default{
        name:'ShowTestRe',
        data(){
            return {
                tabledata:{
                    real_result:{
                        accuracy:0.99,
                        precision:0.98,
                        recall:0.97,
                        f1_score:0.96,
                        confusion_matrix:{
                            path:'http://localhost:8000/static/FGSM_20240710_145401/1479424905624194382_adv.png',
                            tag:1
                        }
                    },
                    adv_result:{
                        accuracy:null,
                        precision:null,
                        recall:null,
                        f1_score:null,
                        confusion_matrix:{
                            path:'',
                            tag:null
                        }
                    }
                },
                chart:null,
            }
            
        },
        mounted(){
            this.initChart()
            this.$bus.$on('test_pass',(data)=>{
                this.tabledata = data
                this.initChart()
            })
        },
        // beforeDestroy() {
        //     if (!this.chart) {
        //         return
        //     }
        //     this.chart.dispose()
        //     this.chart = null
        // },
        methods:{
            initChart(){
                var chart = echarts.init(document.getElementById("chart_real"),'light')
                var option = {
                    title:{
                        text:'测试结果对比展示'
                    },
                    tooltip:{},
                    legend:{
                        data:['原数据集','对抗样本数据集']
                    },
                    xAxis:{
                        data:['准确率','查准率','召回率','F1分数']
                    },
                    yAxis:{},
                    series:[
                        {
                            name:'原数据集',
                            type:'bar',
                            data:[
                                    {value:this.tabledata.real_result.accuracy,itemStyle:'#123415'},
                                    {value:this.tabledata.real_result.precision,itemStyle:'#459056'},
                                    {value:this.tabledata.real_result.recall,itemStyle:'#12d574'},
                                    {value:this.tabledata.real_result.f1_score,itemStyle:'#a15024'},
                                    // 5,8,9,6
                                ]
                        },
                        {
                            name:'对抗样本数据集',
                            type:'bar',
                            data:[
                                    {value:this.tabledata.adv_result.accuracy,itemStyle:'#123415'},
                                    {value:this.tabledata.adv_result.precision,itemStyle:'#459056'},
                                    {value:this.tabledata.adv_result.recall,itemStyle:'#12d574'},
                                    {value:this.tabledata.adv_result.f1_score,itemStyle:'#a15024'},
                                    // 5,8,9,6
                                ]
                        }
                    ]
                }
                chart.setOption(option)
            }
        }
    }
</script>
<style scoped>
.image {
    display: block; /* 使 image 成为块级元素 */
    margin: 0 auto;
    min-width: 90vh;
    height: auto;
    object-fit: fill;
}
.el-card {
  display: flex;
  justify-content: center;
  align-items: center;
}
#chart_real{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:  50px;
}
</style>